<template>
	<view class="cart">
		<view class="container">
			<view class="header">
				<text class="title">我的购物车</text>
				<text class="edit">管理</text>
			</view>

			<view class="section">
				<view class="list">
					<ul v-for="(cart,index) in cart_list" :key="cart_id">
						<li>
							<view class="left">
								<!-- <view class="icon"></view> -->
								<label>
									<checkbox value="cb" iconColor="#ff765e" borderColor="#ff765e"
										active-border-color="#ff765e" activeBackgroundColor="#ff765e"
										style="transform:scale(0.7)" />
								</label>
								<img class="img" :src="cart.cart_img" alt="" />
							</view>
							<view class="right">
								<p class="title">{{cart.cart_title}}</p>
								<p class="category">{{cart.cart_category}}</p>
								<p class="explain">先付后付 &nbsp 七天无理由退款</p>
								<view class="price-add">
									<view class="price-1">
										<text class="price01">￥</text>
										<text class="price">{{cart.cart_Sprice}}</text>
										<text class="price01">RMB</text>
									</view>
									<view class="price-2">
										<text class="price01">￥</text>
										<text class="price">{{cart.cart_Oprice}}</text>
										<text class="price01">RMB</text>
									</view>
									<view class="add">
										<uni-number-box style="margin-left: 18rpx;" width="9" min="1"
											background="#ff7b54" color="#fff" @change="changeValue" />
									</view>
								</view>
							</view>
						</li>
					</ul>
				</view>
			</view>

			<view class="footer">
				<div class="layout">
					<view class="shop_total_price">
						<view class="total">商品总价</view>
						<view class="price">
							<text class="price01">￥</text>
							<text class="price02">158</text>
							<text class="price03">RMB</text>
						</view>
					</view>
					<view class="favourable">
						<view class="total">优惠</view>
						<view class="price">
							<text class="price01">￥</text>
							<text class="price02">-0</text>
							<text class="price03">RMB</text>
						</view>
					</view>
					<view class="total">
						<text>合计</text>
						<view class="price">
							<text class="price01">￥</text>
							<text class="price02">158</text>
							<text class="price03">RMB</text>
						</view>
					</view>
					<button class="btn">立即付款</button>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numberValue: 0,
				cart_list: [{
						cart_id: "1",
						cart_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/639307/2024/0228/98/7224c4ef-a712-435e-a1c5-d6c8e18c1389_262x262_90.jpg",
						cart_title: "2024秋季圆领卫衣青年爆款印花内搭打底衫潮流时尚套头上衣男",
						cart_category: "MC-7A06A2191白色",
						cart_Sprice: "59",
						cart_Oprice: "99",
					},
					{
						cart_id: "2",
						cart_img: "https://img.alicdn.com/bao/uploaded/i1/196993935/O1CN01rUfxZ91ewHWdZye6h_!!196993935.jpg_.webp",
						cart_title: "优衣库女装防风拉链连帽外套 / 内里摇粒绒户外防水冬新款472150 ",
						cart_category: "MC-7A06A2191白色",
						cart_Sprice: "99",
						cart_Oprice: "210",
					},
					{
						cart_id: "3",
						cart_img: "https://img.alicdn.com/imgextra/i4/2076888071/O1CN012SUka329UZedAGEfh_!!4611686018427382791-0-item_pic.jpg_.webp",
						cart_title: "登山男鞋秋冬季运动休闲工地防滑耐磨防水工作上班劳保鞋加绒棉鞋",
						cart_category: "【主图款】灰色",
						cart_Sprice: "49",
						cart_Oprice: "99",
					},
					{
						cart_id: "4",
						cart_img: "https://img.alicdn.com/imgextra/i3/2218567841773/O1CN01V7mU4f1Oy5EKrfuxq_!!2-item_pic.png_.webp",
						cart_title: "乐其塞文/LUCKYSEVEN 2024秋冬新款 麂皮绒女士包袋手拎包单肩包",
						cart_category: "棕色（带挂件）",
						cart_Sprice: "120",
						cart_Oprice: "188",
					},
				]
			};
		},
		methods: {
			change(value) {
				this.numberValue = value
			},
			changeValue(value) {
				// console.log('返回数值：', value);
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';

	ul {
		margin: 0;
		padding: 0;

		li {
			list-style: none;
		}
	}

	button {
		margin: 0;
		padding: 0;
	}

	// 隐藏横向滚动条
	::-webkit-scrollbar {
		display: none;
	}

	.cart {
		width: 100%;

		.container {
			padding: $pad;

			.header {
				width: 100%;
				color: $color;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 0 0 0;

				.title {
					font-size: 40rpx;
				}

				.edit {
					font-size: 35rpx
				}
			}

			.section {
				width: 100%;
				height: 750rpx;
				overflow-y: scroll;
				margin-top: 40rpx;

				.list {
					ul {
						border-radius: 30rpx;
						box-shadow: 0 0 10rpx $boxShadow;
						margin-bottom: 40rpx;
						border: 2rpx solid $boxShadow;
						box-sizing: border-box;

						li {
							padding: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.left {
								display: flex;
								align-items: center;

								.icon {
									width: 30rpx;
									height: 30rpx;
									border: 2rpx solid #ccc;
									border-radius: 50%;
									margin-right: 20rpx;
								}

								.img {
									width: 150rpx;
									height: 150rpx;
									border-radius: 20rpx;
								}
							}

							.right {
								margin-left: 20rpx;

								.title {
									font-size: 25rpx;
									font-weight: bolder;
									overflow: hidden;
									/* 超出隐藏 */
									display: -webkit-box;
									/* 设置为 flexbox */
									-webkit-box-orient: vertical;
									/* 垂直显示 */
									-webkit-line-clamp: 1;
									/* 显示的行数 */
									text-overflow: ellipsis;
									/* 超出部分显示省略号 */
								}

								.category {
									color: #bfbfbf;
									padding: 10rpx 0;
									font-size: 23rpx
								}

								.explain {
									color: #caca00;
									font-size: 20rpx;
									padding: 10rpx 0;
								}

								.price-add {
									display: flex;
									align-items: center;

									.price-1 {
										font-size: 26rpx;
										color: $color;
										margin-right: 10rpx;

										.price {
											font-size: 35rpx;
											font-family: Arial, Helvetica, sans-serif;
										}
									}

									.price-2 {
										font-size: 20rpx;
										color: #c1c1c1;
										text-decoration: line-through;
										margin-top: 14rpx;
									}
								}

								.add {
									background: $bgTop;
									margin-left: 10rpx;
									width: 170rpx;
									background-color: $bagroundColor;
									border-radius: 50rpx;
								}
							}
						}
					}
				}
			}

			.footer {
				width: 100%;
				position: fixed;
				bottom: 100rpx;
				left: 0;

				.layout {
					width: 640rpx;
					margin: 0 auto;
					// background-color: #f9f9f9;
					padding: 15rpx;
					box-shadow: 0rpx -2rpx 5rpx #f5f5f5;
					border-radius: 20rpx;

					.shop_total_price {
						display: flex;
						justify-content: space-between;
						padding: 10rpx 0;

						.price {
							font-size: 25rpx;

							.price02 {
								font-size: 35rpx;
								font-weight: 600;
							}
						}
					}

					.favourable {
						display: flex;
						justify-content: space-between;
						padding: 10rpx 0;

						.price {
							font-size: 25rpx;

							.price02 {
								font-size: 35rpx;
								font-weight: 600;
							}
						}
					}

					.total {
						display: flex;
						justify-content: space-between;
						padding: 10rpx 0;

						text {
							color: $color;
						}

						.price {
							font-size: 30rpx;
							color: $color;

							.price02 {
								font-size: 40rpx;
								font-weight: 600;
							}
						}
					}

					.btn {
						background: $btn;
						border-radius: 50rpx;
						margin: 10rpx 0;
						height: 80rpx;
						line-height: 80rpx;
						color: #fff;
						font-size: 30rpx;
					}
				}
			}
		}

	}
</style>